<template>
  <div class="page has-navbar has-tabbar" v-nav="{title: '忘记密码', showBackButton: true}">
		<div class="page-content padding-top reserve-margin">
      <form action="" @submit.prevent="submit">
        <list>
          <item style="padding:0 15px;">
            <div class="car-enitor-tr">
              <div class="car-editor-name">手机号</div>
              <div class="car-editor-input"><input type="tell" name="userMobile" placeholder="请输入需要找回密码的手机号" v-model="phone" required onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" autocomplete="off" maxlength=11 /></div>
              <div class="car-editor-right"></div>
            </div>
          </item>
          <item style="padding:0 15px;">
            <div class="car-enitor-tr">
              <div class="car-editor-name">验证码</div>
              <div class="car-editor-input"><input type="tell" name="validateCode" placeholder="请输入验证码" v-model="code" required onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" autocomplete="off" maxlength=6 /></div>
              <div class="car-editor-right">
                <div class="car-password-code" v-if="getCodeShow == 0" @click="getCode">获取验证码</div>
                <div class="car-password-codeoff" v-else>{{getCodeShow}}</div>
              </div>
            </div>
          </item>
          <item style="padding:0 15px;">
            <div class="car-enitor-tr">
              <div class="car-editor-name">新密码</div>
              <div class="car-editor-input"><input type="password" name="newPassword" placeholder="请输入新密码" v-model="password" onkeyup="this.value=this.value.replace(/\W/g,'')" onafterpaste="this.value=this.value.replace(/\W/g,'')" autocomplete="off" maxlength=32 required /></div>
              <div class="car-editor-right"></div>
            </div>
          </item>
          <item style="padding:0 15px;">
            <div class="car-enitor-tr">
              <div class="car-editor-name">确认新密码</div>
              <div class="car-editor-input"><input type="password" placeholder="请再次输入新密码" v-model="newpassword" onkeyup="this.value=this.value.replace(/\W/g,'')" onafterpaste="this.value=this.value.replace(/\W/g,'')" autocomplete="off" maxlength=32 required /></div>
              <div class="car-editor-right"></div>
            </div>
          </item>
        </list>
        <button type="submit" class="md-button button button-assertive button-block" style="margin:0 15px; width: calc(100% - 30px); background:#FF6816;">保存</button>
      </form>
		</div>
	</div>
</template>
<script>
export default {
  data () {
    return {
      getCodeShow: 0,
      phone: '',
      code: '',
      password: '',
      newpassword: ''
    }
  },
  methods: {
    submit (event) {
      if (!(/^[0-9]{11}$/gi.test(this.phone))) {
        window.$toast.show('请输入正确手机号')
        return false
      }
      if (!(/^[0-9]{6}$/gi.test(this.code))) {
        window.$toast.show('请输入正确验证码')
        return false
      }
      if (this.password.length > 16 || this.password.length < 6) {
        window.$toast.show('密码长度在6-16位')
        return false
      }
      if (this.password !== this.newpassword) {
        window.$toast.show('两次密码不一致，请重新输入密码')
        return false
      }
      let fd = new FormData(event.target)
      window.axios.post(baseUrl + '/controller/findPwd', fd).then(res => {
        if (res) {
          setTimeout(() => {
            window.$toast.show('修改成功，请重新登陆')
            setTimeout(() => {
              this.$router.back('/login')
            }, 1000)
          }, 400)
        }
      })
    },
    getCode () {
      if (!(/^[0-9]{11}$/gi.test(this.phone))){
        window.$toast.show('请输入正确手机号')
        return false
      }
      window.axios.get(baseUrl + '/controller/getSmsValidateCode', {params: {userMobile: this.phone}}).then(res => {
        if (res) {
          setTimeout(() => {
            window.$toast.show('发送成功，请注意查收')
          }, 400)
        }
      })
      this.getCodeShow = 60
      let setVal = setInterval(() => {
        this.getCodeShow--
        if (this.getCodeShow == 0) clearInterval(setVal)
      }, 1000)
    }
  }
}
</script>
<style scoped>
  .car-editor-right{ padding: 0;}
  .car-password-code{background: #FF6816; color:  #fff; height: 40px; margin: 5px 0; padding: 0 10px; line-height: 40px; border-radius: 2px;}
  .car-password-codeoff{height: 40px; margin: 5px 0; padding: 0 10px; line-height: 40px; border-radius: 2px;border: 1px solid #aaa; box-sizing: border-box; width: 85px; text-align: center; font-size: 16px;}
</style>

